<template>
	<view class="container">
		<!-- 个人信息区域 -->
		<view class="profile-section">
			<view class="profile-content">
				<image class="avatar" :src="'https://ai-public.mastergo.com/ai/img_res/e57dc27fb2cbffd319bb195fd8d336ca.jpg'"
				mode="aspectFill" />
				<view class="user-info">
					<text class="nickname">
						张小明
					</text>
					<text class="signature">
						每天进步一点点
					</text>
				</view>
				<uni-icons class="setting-icon" type="gear" size="24" /></view>
		</view>
		<!-- 学习数据概览 -->
		<view class="stats-section">
			<view class="stat-card">
				<text class="stat-number">
					36
				</text>
				<text class="stat-label">
					学习天数
				</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">
					526
				</text>
				<text class="stat-label">
					已掌握单词
				</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">
					7
				</text>
				<text class="stat-label">
					连续打卡
				</text>
			</view>
		</view>
		<!-- 功能模块区域 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="modules-section">
				<view class="module-card" v-for="(module, index) in modules" :key="index">
					<view class="module-left">
						<uni-icons :type="module.icon" size="24" :color="module.iconColor" /></view>
					<view class="module-content">
						<view class="module-title">
							{{ module.title }}
						</view>
						<view class="module-desc">
							{{ module.description }}
						</view>
						<view class="module-stats">
							{{ module.stats }}
						</view>
					</view>
					<uni-icons class="module-arrow" type="right" size="16" color="#999" /></view>
			</view>
			<!-- 学习统计区域 -->
			<view class="learning-stats">
				<view class="section-title">
					<text>
						学习统计
					</text>
					<text class="view-more">
						查看详情
					</text>
				</view>
				<view class="stats-chart">
					<view class="chart-bar" v-for="(item, index) in weeklyStats" :key="index"
					:style="{ height: item.height }">
						<text class="bar-value">
							{{ item.value }}分钟
						</text>
					</view>
				</view>
				<view class="chart-labels">
					<text v-for="(day, index) in ['一', '二', '三', '四', '五', '六', '日']" :key="index">
						{{ day }}
					</text>
				</view>
			</view>
			<!-- 个性化推荐 -->
			<view class="recommend-section">
				<view class="section-title">
					<text>
						个性化推荐
					</text>
					<text class="view-more">
						更多
					</text>
				</view>
				<scroll-view class="recommend-scroll" scroll-x>
					<view class="recommend-cards">
						<view class="word-card" v-for="(word, index) in recommendWords" :key="index">
							<text class="word-text">
								{{ word.word }}
							</text>
							<text class="word-phonetic">
								{{ word.phonetic }}
							</text>
							<text class="word-meaning">
								{{ word.meaning }}
							</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
	</view>
</template>

<script>

	const modules = [{
		title: '我的单词表',
		description: '已收藏235个单词',
		stats: '最近添加：Hello, World, Programming',
		icon: 'list',
		iconColor: '#FFB4A2'
	},
	{
		title: '我的听写',
		description: '本周完成4次听写',
		stats: '最近得分：95分',
		icon: 'headphones',
		iconColor: '#E5989B'
	},
	{
		title: '我的易错单词',
		description: '共计28个易错单词',
		stats: '错误率降低12%',
		icon: 'bars',
		iconColor: '#FFB4A2'
	}];
	const weeklyStats = [{
		value: 45,
		height: '180rpx'
	},
	{
		value: 30,
		height: '120rpx'
	},
	{
		value: 60,
		height: '240rpx'
	},
	{
		value: 40,
		height: '160rpx'
	},
	{
		value: 25,
		height: '100rpx'
	},
	{
		value: 55,
		height: '220rpx'
	},
	{
		value: 35,
		height: '140rpx'
	}];
	const recommendWords = [{
		word: 'Ephemeral',
		phonetic: '/ɪˈfem(ə)rəl/',
		meaning: '短暂的，瞬息的'
	},
	{
		word: 'Serendipity',
		phonetic: '/ˌserənˈdɪpəti/',
		meaning: '意外发现，机缘巧合'
	},
	{
		word: 'Mellifluous',
		phonetic: '/məˈlɪfluəs/',
		meaning: '悦耳的，如蜜般的'
	},
	{
		word: 'Ethereal',
		phonetic: '/ɪˈθɪriəl/',
		meaning: '轻盈的，空灵的'
	}];
	export default {
		data() {
			return {
				modules,
				weeklyStats,
				recommendWords
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	
	page {
	     height: 100%;
	     background-color: #FFF6F2;
	}
	 .container {
	     height: 100%;
	     display: flex;
	     flex-direction: column;
	}
	 .profile-section {
	     background: linear-gradient(135deg, #FFB4A2 0%, #E5989B 100%);
	     padding: 40rpx 30rpx;
	     flex-shrink: 0;
	}
	 .profile-content {
	     display: flex;
	     align-items: center;
	     position: relative;
	}
	 .avatar {
	     width: 120rpx;
	     height: 120rpx;
	     border-radius: 60rpx;
	     border: 4rpx solid #FFFFFF;
	}
	 .user-info {
	     margin-left: 24rpx;
	     flex: 1;
	}
	 .nickname {
	     font-size: 18px;
	     color: #FFFFFF;
	     font-weight: 500;
	     display: block;
	     margin-bottom: 8rpx;
	}
	 .signature {
	     font-size: 14px;
	     color: rgba(255, 255, 255, 0.8);
	     display: block;
	}
	 .setting-icon {
	     position: absolute;
	     right: 0;
	     top: 50%;
	     transform: translateY(-50%);
	     color: #FFFFFF;
	}
	 .stats-section {
	     display: flex;
	     justify-content: space-between;
	     padding: 30rpx;
	     background-color: #FFEDE6;
	     margin: -40rpx 24rpx 0;
	     border-radius: 16rpx;
	     box-shadow: 0 4rpx 16rpx rgba(229, 152, 155, 0.15);
	     position: relative;
	     z-index: 1;
	     flex-shrink: 0;
	}
	 .stat-card {
	     flex: 1;
	     text-align: center;
	     padding: 0 20rpx;
	}
	 .stat-number {
	     font-size: 24px;
	     color: #333333;
	     font-weight: 600;
	     display: block;
	     margin-bottom: 8rpx;
	}
	 .stat-label {
	     font-size: 14px;
	     color: #666666;
	     display: block;
	}
	 .content-scroll {
	     flex: 1;
	     overflow: auto;
	}
	 .modules-section {
	     padding: 24rpx;
	}
	 .module-card {
	     display: flex;
	     align-items: center;
	     background-color: #FFEDE6;
	     padding: 32rpx 24rpx;
	     border-radius: 16rpx;
	     margin-bottom: 24rpx;
	     box-shadow: 0 4rpx 16rpx rgba(229, 152, 155, 0.1);
	     border: 2rpx solid #FFD6CC;
	}
	 .module-left {
	     width: 48rpx;
	     height: 48rpx;
	     display: flex;
	     align-items: center;
	     justify-content: center;
	     margin-right: 24rpx;
	}
	 .module-content {
	     flex: 1;
	}
	 .module-title {
	     font-size: 16px;
	     color: #333333;
	     font-weight: 500;
	     margin-bottom: 8rpx;
	}
	 .module-desc {
	     font-size: 14px;
	     color: #666666;
	     margin-bottom: 8rpx;
	}
	 .module-stats {
	     font-size: 12px;
	     color: #999999;
	}
	 .module-arrow {
	     margin-left: 16rpx;
	}
	 .learning-stats {
	     background-color: #FFEDE6;
	     margin: 24rpx;
	     padding: 24rpx;
	     border-radius: 16rpx;
	     box-shadow: 0 4rpx 16rpx rgba(229, 152, 155, 0.1);
	     border: 2rpx solid #FFD6CC;
	}
	 .section-title {
	     display: flex;
	     justify-content: space-between;
	     align-items: center;
	     margin-bottom: 32rpx;
	     font-size: 16px;
	     color: #333333;
	     font-weight: 500;
	}
	 .view-more {
	     font-size: 14px;
	     color: #666666;
	     font-weight: normal;
	}
	 .stats-chart {
	     height: 320rpx;
	     display: flex;
	     justify-content: space-between;
	     align-items: flex-end;
	     margin-bottom: 16rpx;
	}
	 .chart-bar {
	     width: 48rpx;
	     background-color: #FFB4A2;
	     border-radius: 24rpx;
	     position: relative;
	     transition: height 0.3s ease;
	}
	 .bar-value {
	     position: absolute;
	     top: -40rpx;
	     left: 50%;
	     transform: translateX(-50%);
	     font-size: 12px;
	     color: #666666;
	     white-space: nowrap;
	}
	 .chart-labels {
	     display: flex;
	     justify-content: space-between;
	}
	 .chart-labels text {
	     font-size: 14px;
	     color: #666666;
	     flex: 1;
	     text-align: center;
	}
	 .recommend-section {
	     background-color: #FFEDE6;
	     margin: 24rpx;
	     padding: 24rpx;
	     border-radius: 16rpx;
	     box-shadow: 0 4rpx 16rpx rgba(229, 152, 155, 0.1);
	     border: 2rpx solid #FFD6CC;
	}
	 .recommend-scroll {
	     width: 100%;
	}
	 .recommend-cards {
	     display: flex;
	     padding: 8rpx 0;
	}
	 .word-card {
	     flex-shrink: 0;
	     width: 280rpx;
	     background-color: #FFFFFF;
	     padding: 24rpx;
	     border-radius: 12rpx;
	     margin-right: 24rpx;
	     border: 2rpx solid #FFD6CC;
	     box-shadow: 0 4rpx 12rpx rgba(229, 152, 155, 0.08);
	}
	 .word-text {
	     font-size: 16px;
	     color: #333333;
	     font-weight: 500;
	     display: block;
	     margin-bottom: 8rpx;
	}
	 .word-phonetic {
	     font-size: 14px;
	     color: #666666;
	     display: block;
	     margin-bottom: 8rpx;
	}
	 .word-meaning {
	     font-size: 14px;
	     color: #999999;
	     display: block;
	}


</style>
